<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
        content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="true">
<title>Geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<style type="text/css" media="handheld, only screen and (min-width:320px) and (max-width:800px)">
body {
	background: #FFFFFF;
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: 微软雅黑, 'Microsoft YaHei', \5FAE\8F6F\96C5\9ED1, sans-serif;
	color: #000000;
}
input#btn {
	height:25px;
	font-size:16px;
	margin:10px 0;	
}
#info {
	width:100%;
	height:40px;
	font-size:13px;
	border-top:1px #ccc dashed;
	border-bottom:1px #ccc dashed;
	padding:5px 0;
}
#map {
	width:100%;
	height:400px;
	border-top:1px #ccc dashed;
	border-bottom:1px #ccc dashed;
	margin-top:10px;
}
</style>
</head>
<body>
<input type="button" id="btn" value="获取位置" />
<div id="info" title="放置用户信息"></div>
<div id="map" title="放置Google地图"></div>
<script>
// 获取元素的引用
var btn = document.getElementById('btn');
var info = document.getElementById('info');
var map = document.getElementById('map');
var geolocation;
var gmap;
var gmarker;

// 按钮单击事件，获取地理位置
btn.onclick = function(){
   // 首先检查是否支持地理定位，如果支持就获取地理位置
   if (window.navigator.geolocation) {
      info.innerHTML = "请等待查询结果返回";
      geolocation = window.navigator.geolocation;
      geolocation.getCurrentPosition(getPositionSuccess,
                                           getPositionError,
                                           {timeout:5000});
   }else {
      info.innerHTML = "你的浏览器不支持地理位置定位";
   }
}

// 获取地理位置失败
function getPositionError(error){
   info.innerHTML = error.message;
}

// 成功获取地理位置
function getPositionSuccess(position){
   var lat = position.coords.latitude;
   var lon = position.coords.longitude;
   
   // 定义持续追踪位置
   geolocation.watchPosition(refreshPosition);
   
   // 载入Google地图
   var latLng = new google.maps.LatLng(lat, lon);
   var mapOptions = {zoom:16,
                         center:latLng,
                         mapTypeId:google.maps.MapTypeId.ROADMAP
   };
   gmap = new google.maps.Map(map, mapOptions);
   // 向地图中添加标记
   gmarker = new google.maps.Marker({
      position: latLng,
      map: gmap
   });
}

// 持续追踪位置
function refreshPosition(position){
   var lat = position.coords.latitude;
   var lon = position.coords.longitude;

   // 将经度、维度转换为地名
   getPlaceFromFlickr(lat, lon, 'output');

   var latLng = new google.maps.LatLng(lat, lon);
   // 重设地图位置
   gmap.setCenter(latLng);
   // 重设标记位置
   gmarker.setOptions({position:latLng});
}

// 将经度、维度转换为地名
function getPlaceFromFlickr(lat, lon, callback){
   info.innerHTML = "你所在的位置： 经度" + lat + "，纬度" + lon;
   // 定义YQL语句
   var yql = 'select * from flickr.places where lat=' +
               lat + ' and lon=' + lon;
 
   // 将YQL网络服务的API嵌入到网页，这是JavaScript库
   var url = 'http://query.yahooapis.com/v1/public/yql?q='+
                encodeURIComponent(yql) +
               '&format=json&diagnostics=' +
               'false&callback=' + callback;
 
   // 创建一个script元素，并引用JavaScript库，最后放在head元素中
   var script = document.createElement('script');
   script.setAttribute('src',url);
   document.getElementsByTagName('head')[0].appendChild(script);
};
 
// 回调函数，输出位置地名
function output(o){
   if(typeof(o.query.results.places.place) != 'undefined'){
      info.innerHTML += "<br />" + o.query.results.places.place.name;
   }
}
</script>
</body>
</html>
